<template>
	<view class="goods_item" @click="$emit('handNavToDetails')">
		<view class="imgs">
			<u-image style="min-height: 370rpx;width: 100%;" height="370rpx" width="100%" :src="item.imgUrl"
				mode='aspectFill'>
			</u-image>
			<!-- 	<view class="live_box"
				style="background: url(../../static/img/live-icon.png) no-repeat;background-size: 100%;">
				直播
			</view> -->
		</view>
		<view class="goods_msg">
			<view class="title">
				{{item.title}}
			</view>
			<view class="">
				<view class="goods_bot">
					<!-- <view class="type_title">
						新品
					</view> -->
					<u-tag bg-color="#FFA147" text="自营店" v-if="item.isAutarky==1" mode='dark' size='mini' class="type_title" />
					<u-icon color='#BDBDBD' name="map"></u-icon>
					<view class="site">
						距离{{distance}}km
					</view>
				</view>
				<view class="pic_box">
					<view class="pic_num">
						￥{{item.price}}
					</view>
					<view class="number_people">
						{{item.salesVolume}}人购买
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMapDistance
	} from '@/utils/utils.js'
	export default {
		name: "ZY-Goods-item",
		props: {
			item: {
				type: Object,
				default: () => {},
				required: true
			}
		},
		computed: {
			distance() {
				const longitude = this.cache.getCache('longitude')
				const latitude = this.cache.getCache('latitude')
				if (latitude && longitude) {
					return (getMapDistance(latitude, longitude, this.item.lat, this.item.lng)).toFixed(2)
				}
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.goods_item {
		display: flex;
		flex-direction: column;
		margin-bottom: 32rpx;
		padding: 0;
		width: 49%;

		.imgs {
			display: flex;
			flex-direction: column;
			position: relative;

			.live_box {
				position: absolute;
				right: 0;
				bottom: 0;
				width: 77rpx;
				height: 32rpx;
				line-height: 32rpx;
				text-align: center;
				font-size: 20rpx;
				color: #fff;
			}
		}

		.goods_msg {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin: 0 10rpx;
			padding-bottom: 10rpx;

			.pic_box {
				display: flex;
				align-items: center;

				.number_people {
					font-size: 24rpx;
					color: #BDBDBD;
					margin-left: 10rpx;
				}

				.pic_num {
					color: $u-type-primary;
					font-size: 34rpx;
				}
			}

			.goods_bot {
				display: flex;
				align-items: center;
				margin: 10rpx 0;

				.type_title {
					margin-right: 23rpx;
					// width: 100%;
					white-space: nowrap;
				}

				.site {
					font-size: 24rpx;
					color: #BDBDBD;
					white-space: nowrap;
				}
			}

			.title {
				@include ellipsisMultiline(2);
				font-size: 30rpx;
				color: #101010;
				margin-top: 10rpx;
			}
		}
	}
</style>
